<template>
  <div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="smile-o" :to="{
        path: '/home'
      }">Home</van-tabbar-item>
      <van-tabbar-item icon="search" :to="{
        path: '/course'
      }">课程表</van-tabbar-item>
      <van-tabbar-item icon="friends-o" :to="{
        path: 'Backstage'
      }">后台</van-tabbar-item>
      <van-tabbar-item icon="contact" :to="{
        path: 'Center'
      }">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import PubSub from "pubsub-js";
export default {
  name: "topNavigation",
  data() {
    return {
      active: 0
    }
  },
  methods: {
    onChange(index) {
      console.log('切换啦');
      console.log(index);
    }
  },
  created() {
    // 订阅
    PubSub.subscribe('HomeCom',(msg,data)=>{
      // console.log(msg) // 这里将会输出对应设置的 pubsubID
      // console.log(data) // 这里将会输出对应设置的参数
      this.active = data;
    })
    PubSub.subscribe('CourseCom', (msg,data)=> {
      this.active = data;
    })
    PubSub.subscribe('BackstageCom', (msg,data)=> {
      this.active = data;
    })
    PubSub.subscribe('CenterCom', (msg,data)=> {
      this.active = data;
    })
  }
}
</script>

<style scoped>

</style>